<!DOCTYPE html>
<html lang="en">
<style>
pre {
    background: #EEE;
    border: 1px solid #CCC;
    padding: 10px;
}
#page-wrapper {
    border-top: 0px solid #CCC;
    margin: 1em auto;
    width: 600px;
}
body {
    background: #1b4992;
}
</style>

<script>
window.onload = function() {
    function $(selector) {
        return document.querySelector(selector);
    }
    
    var socket = new WebSocket('ws://127.0.0.1:7890');
    socket.onopen = function(event) {
        $('#messages').innerHTML = 'Connected<br>';
    };
    socket.onmessage = function(event) {
        $('#messages').innerHTML = '<br>熊本-え ' + event.data + '<br>' + $('#messages').innerHTML;
    };
    socket.onclose = function(event) {
        $('#messages').innerHTML = 'Disconnected ' + event.reason;
    };
};
</script>

<div id="page-wrapper">
	<img border="0" src="../../eii.png" width="350" alt="OpenKAI">
    <pre id="messages">Connecting</pre>
</div>

